import React, { memo } from 'react'
import { useHeartLineEchartHooks, useOtherLineEchartHooks } from '@/hooks/CustomLineEchartHooks';

import dayjs from "dayjs"

import { getHeartDatas, getBloodStatusByMaxAndMin } from "@/utils/historyUtil"

import heartImg from "@/assets/images/hospital/heart.png"
import stoImg from "@/assets/images/hospital/sto.png"
import stressImg from "@/assets/images/hospital/stress.png"
import bloodImg from "@/assets/images/hospital/blood.png"

const bloodStatusList = ['正常', '未按照标准姿势测量', '测量过程中身体未保持静止', '运动后测量'];


function Heart(props) {
    //心率
    useHeartLineEchartHooks("hosHeartEcharts", getHeartDatas(props.heart?.charts), "#FF5959");
    //血氧
    useOtherLineEchartHooks("hosStoEcharts", getHeartDatas(props.spo2?.charts), "#FF5050", ["rgba(255, 80, 80, 0.3)", "rgba(255, 80, 80, 0)"]);
    //压力
    useOtherLineEchartHooks("hosStressEcharts", getHeartDatas(props.stress?.charts), "#00D6BA", ["rgba(0, 214, 186, 0.3)", "rgba(0, 214, 186, 0)"]);

    return (
        <>
            
            {/* 心率 */}
            <div className='hosSleepBox'>

                {/* 头部标题 */}
                <div className='hosSleepTop'>
                    <div className='hosSleepLeft'>
                        <img className='hosSleepIcon' src={heartImg} alt='' />
                        <span className='hosSleepTit'>心率</span>
                    </div>
                    <div className='hosSleepRight'>{props.date && dayjs(props.date).format("MM月DD日")}</div>
                </div>

                {/* 心率部分 */}
                <div className={`hosHtContent ${(!props.heart || JSON.stringify(props.heart) === '{"charts":{}}') && 'hidden'}`}>

                    <div className="hosHtCountBox">

                        <div className='hosHtCountItem'>
                            <div className='hosSpCtTit'>最高心率</div>
                            <div className='hosSpCtNum'>
                                <span className='hosSpCtCount'>{props.heart && props.heart.maxHr && props.heart.maxHr}</span>
                                <span className='hosSpCtUnit'>次/分</span>
                            </div>
                        </div>

                        {/* 线 */}
                        <div className='hosHtItemLine'></div>

                        <div className='hosHtCountItem'>
                            <div className='hosSpCtTit'>最低心率</div>
                            <div className='hosSpCtNum'>
                                <span className='hosSpCtCount'>{props.heart && props.heart.minHr && props.heart.minHr}</span>
                                <span className='hosSpCtUnit'>次/分</span>
                            </div>
                        </div>

                        {/* 线 */}
                        <div className='hosHtItemLine'></div>

                        <div className='hosHtCountItem'>
                            <div className='hosSpCtTit'>平均心率</div>
                            <div className='hosSpCtNum'>
                                <span className='hosSpCtCount'>{props.heart && props.heart.avgHr && props.heart.avgHr}</span>
                                <span className='hosSpCtUnit'>次/分</span>
                            </div>
                        </div>
                    </div>


                    <div className='hosHtCountBox hosHtCountBomBox'>

                        <div className='hosHtCountItem'>
                            <div className='hosSpCtTit'>静息心率</div>
                            <div className='hosSpCtNum'>
                                <span className='hosSpCtCount'>{props.heart && props.heart.avgRhr && props.heart.avgRhr}</span>
                                <span className='hosSpCtUnit'>次/分</span>
                            </div>
                        </div>

                        {/* 线 */}
                        {
                            props.heart && props.heart.abnormalHrCount !== 0 && (<div className='hosHtItemLine'></div>)
                        }

                        {
                            props.heart && props.heart.abnormalHrCount !== 0 && (
                                <div className='hosHtCountItem'>
                                    <div className='hosSpCtTit'>异常心率</div>
                                    <div className='hosSpCtNum'>
                                        <span className='hosSpCtCount'>{props.heart.abnormalHrCount}</span>
                                        <span className='hosSpCtUnit'>次/分</span>
                                    </div>
                                </div>
                            )
                        }

                        
                    </div>


                    {/* 心率echarts */}
                    <div className='hosHeartEchartBox'>
                        <div className='hosHeartEchart' id='hosHeartEcharts'></div>
                    </div>
                </div>

                <div className={`sleepEmptyBox ${props.heart && JSON.stringify(props.heart) !== '{"charts":{}}' && 'hidden'}`}>无数据</div>
            </div>



            {/* 血氧==================================================== */}
            <div className='hosSleepBox'>

                {/* 头部标题 */}
                <div className='hosSleepTop'>
                    <div className='hosSleepLeft'>
                        <img className='hosSleepIcon' src={stoImg} alt='' />
                        <span className='hosSleepTit'>血氧</span>
                    </div>
                    <div className='hosSleepRight'>{props.date && dayjs(props.date).format("MM月DD日")}</div>
                </div>

                {/* 心率部分 */}

                <div className={`hosHtContent ${(!props.spo2 || JSON.stringify(props.spo2) === '{"charts":{}}') && 'hidden'}`}>

                    <div className="hosHtCountBox">

                        <div className='hosHtCountItem'>
                            <div className='hosSpCtTit'>今日最高</div>
                            <div className='hosSpCtNum'>
                                <span className='hosSpCtCount'>{props.spo2 && props.spo2.maxSpo2 && props.spo2.maxSpo2}</span>
                                <span className='hosSpCtUnit'>%</span>
                            </div>
                        </div>

                        {/* 线 */}
                        <div className='hosHtItemLine'></div>

                        <div className='hosHtCountItem'>
                            <div className='hosSpCtTit'>今日最低</div>
                            <div className='hosSpCtNum'>
                                <span className='hosSpCtCount'>{props.spo2 && props.spo2.minSpo2 && props.spo2.minSpo2}</span>
                                <span className='hosSpCtUnit'>%</span>
                            </div>
                        </div>

                        {/* 线 */}
                        <div className='hosHtItemLine'></div>

                        <div className='hosHtCountItem'>
                            <div className='hosSpCtTit'>今日平均</div>
                            <div className='hosSpCtNum'>
                                <span className='hosSpCtCount'>{props.spo2 && props.spo2.avgSpo2 && props.spo2.avgSpo2}</span>
                                <span className='hosSpCtUnit'>%</span>
                            </div>
                        </div>
                    </div>
                   

                    {
                        props.spo2 && props.spo2.lackSpo2Count !== 0 && (
                            <div className='hosHtCountBox hosHtCountBomBox'>

                                <div className='hosHtCountItem'>
                                    <div className='hosSpCtTit'>缺氧次数</div>
                                    <div className='hosSpCtNum'>
                                        <span className='hosSpCtCount'>{props.spo2.lackSpo2Count}</span>
                                        <span className='hosSpCtUnit'>次</span>
                                    </div>
                                </div>
                            </div>
                        )
                    }


                    {/* 心率echarts */}
                    <div className='hosHeartEchartBox'>
                        <div className='hosHeartEchart' id='hosStoEcharts'></div>
                    </div>
                </div>

                <div className={`sleepEmptyBox ${props.spo2 && JSON.stringify(props.spo2) !== '{"charts":{}}' && 'hidden'}`}>无数据</div>
            </div>


            {/* 压力 ================================================== */}
            <div className='hosSleepBox'>

                {/* 头部标题 */}
                <div className='hosSleepTop'>
                    <div className='hosSleepLeft'>
                        <img className='hosSleepIcon' src={stressImg} alt='' />
                        <span className='hosSleepTit'>压力</span>
                    </div>
                    <div className='hosSleepRight'>{props.date && dayjs(props.date).format("MM月DD日")}</div>
                </div>

                {/* 心率部分 */}

                <div className={`hosHtContent ${(!props.stress || JSON.stringify(props.stress) === '{"charts":{}}') && 'hidden'}`}>

                    <div className="hosHtCountBox">

                        <div className='hosHtCountItem'>
                            <div className='hosSpCtTit'>最大压力</div>
                            <div className='hosSpCtNum'>
                                <span className='hosSpCtCount'>{props.stress && props.stress.maxStress && props.stress.maxStress}</span>
                            </div>
                        </div>

                        {/* 线 */}
                        <div className='hosHtItemLine'></div>

                        <div className='hosHtCountItem'>
                            <div className='hosSpCtTit'>最小压力</div>
                            <div className='hosSpCtNum'>
                                <span className='hosSpCtCount'>{props.stress && props.stress.minStress && props.stress.minStress}</span>
                            </div>
                        </div>

                        {/* 线 */}
                        <div className='hosHtItemLine'></div>

                        <div className='hosHtCountItem'>
                            <div className='hosSpCtTit'>平均压力</div>
                            <div className='hosSpCtNum'>
                                <span className='hosSpCtCount'>{props.stress && props.stress.avgStress && props.stress.avgStress}</span>
                            </div>
                        </div>
                    </div>


                    {/* 心率echarts */}
                    <div className='hosHeartEchartBox'>
                        <div className='hosHeartEchart' id='hosStressEcharts'></div>
                    </div>
                </div>

                <div className={`sleepEmptyBox ${props.stress && JSON.stringify(props.stress) !== '{"charts":{}}' && 'hidden'}`}>无数据</div>
            </div>

            {/* 血压 */}
            <div className='hosSleepBox'>

                {/* 头部标题 */}
                <div className='hosSleepTop hosBloodTop'>
                    <div className='hosSleepLeft'>
                        <img className='hosSleepIcon' src={bloodImg} alt='' />
                        <span className='hosSleepTit'>血压</span>
                    </div>
                </div>

                {
                    props.bloods && props.bloods.length > 0 ? (
                        <div className='hosHtContent'>
                            {/* 血压提示部分 */}
                            

                            {/* 每一次血压测量 */}
                            <div className='hosBloodUl'>

                                {
                                    props.bloods.map((item, index) => (
                                        <div key={index} className='hosBloodLiBox'>
                                            {
                                                item.status !== 0 && (<div className='hosBloodTip'>{bloodStatusList[item.status]}，结果可能不准</div>)
                                            }
                                            <div className='hosBloodLi'>

                                                <div className='hosBloodLiTop'>
                                                    <span className='hosSpCtCount'>{item.max}/{item.min}</span>
                                                    <span className='hosSpCtUnit'>mmHg</span>

                                                    <span className='hosSpCtTit hosBlCtTit'>脉搏{item.pulse}</span>
                                                    <span className='hosSpCtUnit'>次/分</span>
                                                </div>

                                                {/* 日期 */}
                                                <div className='hosBloodLiBom'>
                                                    <span>{dayjs.unix(item.time).format("YYYY/MM/DD HH:mm")}</span>
                                                    <span className='hosBloodLiBomInd'>{getBloodStatusByMaxAndMin(item.max, item.min)}</span>
                                                </div>
                                            </div>
                                        </div>
                                    ))
                                }

                            </div>
                        </div>
                    ) : (<div className='sleepEmptyBox'>无数据</div>)
                }
            </div>
        </>
    )
}

export default memo(Heart);
